import { Page } from '@/components/page';
import { ZLTable, useTable } from '@/components/table';
import {
  IBusinessClassification,
  apiGetBusinessClassificationDelete,
  apiGetBusinessClassificationPage,
} from '@/services/type';
import { Button, Space } from 'antd';
import React from 'react';
import { EditModal } from './edit-modal';
import styles from './index.less';

const Index: React.FC<any> = () => {
  const { tableProps, refresh, search, form } = useTable(
    (params: IBusinessClassification) => {
      return apiGetBusinessClassificationPage(params);
    },
    {},
  );

  return (
    <Page title="导航管理">
      <ZLTable
        header={
          <div className={styles.header}>
            {/*<ProForm*/}
            {/*  formRef={form}*/}
            {/*  className={styles.search}*/}
            {/*  syncToUrl*/}
            {/*  submitter={{*/}
            {/*    searchConfig: { submitText: '查询', resetText: '重置' },*/}
            {/*    onSubmit: search.submit,*/}
            {/*    onReset: search.reset,*/}
            {/*  }}*/}
            {/*>*/}
            {/*  <ProFormText*/}
            {/*    name="title"*/}
            {/*    noStyle*/}
            {/*    width={200}*/}
            {/*    placeholder="名称"*/}
            {/*    fieldProps={{ prefix: <SearchOutlined /> }}*/}
            {/*  />*/}
            {/*</ProForm>*/}
            <div className={styles.extra}>
              <EditModal onFinish={refresh}>
                <Button type="primary">新增</Button>
              </EditModal>
            </div>
          </div>
        }
        {...tableProps}
        rowKey={(item) => item.id}
        columns={
          [
            {
              title: '序号',
              dataIndex: 'id',
              render: (_, record, index) =>
                index +
                1 +
                (tableProps.pagination.current - 1) *
                  tableProps.pagination.pageSize,
            },
            {
              title: '名称',
              dataIndex: 'title',
            },
            {
              title: '排序',
              dataIndex: 'sortOrder',
            },
            {
              title: '操作',
              width: 180,
              align: 'center',
              render: (_, record) => {
                return (
                  <Space size={0}>
                    <EditModal onFinish={refresh} record={record}>
                      <Button type="link">修改</Button>
                    </EditModal>
                    <Button
                      onClick={() => {
                        apiGetBusinessClassificationDelete(record.navId).then(
                          (res) => {
                            if (res.code == 200) {
                              refresh();
                            }
                          },
                        );
                      }}
                      type="link"
                      size="small"
                    >
                      删除
                    </Button>
                  </Space>
                );
              },
            },
          ] as any
        }
      />
    </Page>
  );
};

export default Index;
